<template>
	<view class="content">
		<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
			<!-- 自定义下拉刷新 -->
			<template #refresher="{ refresherStatus }">
				<customRefresher :status="isLoading ? 0 : 1" />
			</template>
			<slot :dataList="dataList">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
					<view class="item-title">{{item.title}}</view>
					<view class="item-detail">{{item.detail}}</view>
					<view class="item-line"></view>
				</view>
			</slot>

		</z-paging>
	</view>
</template>

<script>
	import customRefresher from '@/components/CustomRefresher/CustomRefresher.vue';
	export default {
		components: {
			customRefresher
		},
		props: {
			apiCallback: {
				type: Function,
				default: () => {},
			},
		},
		data() {
			return {
				pageNum: 1, // 当前页数
				pageSize: 10, // 每页大小
				totalPages: 1, // 总页数
				isLoading: false, // 是否正在加载
				dataList: [], // 数据列表
			}
		},
		methods: {
			async queryList(pageNo, pageSize) {
				if (this.isLoading) return;
				this.isLoading = true;
				try {
					const params = {
						pageNo,
						pageSize,
					};
					const response = await this.apiCallback(params); // 调用外部的 API 请求方法
					const rawData = response.data.list || [];
					this.$refs.paging.complete(rawData);
					this.totalPages = response.data.pages || 1; // 设置总页数
					this.pageNum = pageNo; // 更新当前页码
					return rawData;
				} catch (error) {
					console.error("加载数据失败:", error);
					return [];
				} finally {
					this.isLoading = false;
				}
			},
			itemClick(item) {
				console.log('点击了', item.title);
			},
			reload() {
				this.$refs.paging.reload();
			},
			// updatePageScrollTop(scrollTop) {
			// 	this.$refs.paging.updatePageScrollTop(scrollTop);
			// },
			// doChatRecordLoadMore() {
			// 	this.$refs.paging.doChatRecordLoadMore();
			// },
			// pageReachBottom() {
			// 	this.$refs.paging.pageReachBottom();
			// },
		}
	}
</script>

<style>
	/* 这种情况无需确定z-paging的高度，内部元素会自动将其撑高 */
	.item {
		z-index: 1;
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}

	.item-detail {
		z-index: 1;
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: white;
		background-color: #007AFF;
	}

	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
</style>